操作屬性 (Attributes)

HTML 標籤上會有屬性，例如：

<img id="photo" src="a.jpg" alt="圖片">

在 JS 裡，我們有三種方式操作：

a) getAttribute() / setAttribute()

let img = document.getElementById("photo");
console.log(img.getAttribute("src")); // a.jpg

img.setAttribute("src", "b.jpg"); // 換圖片

b) 直接修改屬性
img.alt = "新的描述文字";

c) 移除屬性
img.removeAttribute("alt");

操作 class（CSS 樣式）

每個 HTML 元素都有一個 classList 屬性，可以方便管理 class。

a) 新增 class
title.classList.add("highlight");

b) 移除 class
title.classList.remove("highlight");

c) 切換 class（有就移除，沒有就加上）
title.classList.toggle("dark-mode");

d) 檢查是否有某個 class

if (title.classList.contains("active")) {
  console.log("目前是 active 狀態");
}

🔹 小練習：圖片切換 + 主題切換
進階:Tabs（頁籤切換）專案